<template>
	<view>
		<tag-info :tagInfo="selectTag"></tag-info>

		<scroll-view :style="{ height: swiperHeight + 'px' }" scroll-y="true" class="list" @scrolltolower="loadMore()">
			<view class="">
				<list class="user-list">
					<cell v-for="(user, index) in tagUserInfo.list" :key="user.userId +'__'+ index"><tag-user-item :user="user" :index="index" @userFollow="userFollow"></tag-user-item></cell>
				</list>
				<load-more :loadText="loadText" :loading="false"></load-more>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import tagInfo from '../../components/tag/tag-info.vue';
import loadMore from '../../components/common/load-more.vue';
import tagUserItem from '../../components/tag/tag-user-item.vue';
import { mapState, mapMutations } from 'vuex';
import constant from '../../utils/Constant.js';
import showToast from '../../utils/ToastUtils.js';
export default {
	computed: {
		...mapState(['selectTag'])
	},
	components: {
		tagInfo,
		loadMore,
		tagUserItem
	},
	data() {
		return {
			loadText: '上拉加载更多',
			tagUserInfo: {
				pageNo:1,
				list:[]
			}
		};
	},
	methods: {
		loadMore() {
			if (this.loadText !== '上拉加载更多') return;
			this.loadText = '加载中...';
			this.tagUserInfo.pageNo+=1;
			this.loadTagUserList();
		},
		loadTagUserList(){
			uni.request({
			    url: constant.baseHttpUri + constant.pathUri.tagUserList,
			    header: constant.authHead(),
				data: {
					"pageNo":this.tagUserInfo.pageNo,
					"tagId":this.selectTag.tagId
				},
				method: 'GET',
			    success: res => {
					if(res.data.code === constant.dataCode.OK ){
						this.tagUserInfo.list.push(...res.data.data);
						if(res.data.data.length<10){
							this.loadText = '没有更多数啦!';
						}else{
							this.loadText = '上拉加载更多';
						}
					}else{
						showToast(res.data.msg);
					}
			    },fail:r=>{
					this.loadText = '上拉加载更多';
					console.log(r);
				}
			});
		},
		userFollow(index){
			uni.request({
			    url: constant.baseHttpUri + constant.pathUri.userFollow,
			    data: {
					"followId":this.tagUserInfo.list[index].userId
				},
			    header: constant.authHead(),
				method: 'GET',
			    success: res => {
					if(res.data.code === constant.dataCode.OK ){
						if(res.data.data){
							if(this.tagUserInfo.list[index].isFollow){
								this.tagUserInfo.list[index].followNum-=1;
							}
							this.tagUserInfo.list[index].isFollow = false;
						}else{
							if(!this.tagUserInfo.list[index].isFollow){
								this.tagUserInfo.list[index].followNum+=1;
							}
							this.tagUserInfo.list[index].isFollow = true;
						}
					}else{
						showToast(res.data.msg);
					}
			    },fail(r){
					console.log(r);
				}
			});
		},
	},
	onLoad() {
		uni.getSystemInfo({
			success: res => {
				this.swiperHeight = res.windowHeight - 150;
				this.loadTagUserList();
			}
		});
	}
};
</script>

<style lang="less" scoped>
.user-list {
	padding: 0 40rpx;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-content: flex-start;
}
</style>
